<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">我的题库</a></el-breadcrumb-item>
      <el-breadcrumb-item>题库详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
      <div class="subjectTitle">
        {{subject.house}} - {{subject.name}}
      </div>
      <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
        <div class="searchBox">
          <el-input placeholder="输入题目关键字" prefix-icon="el-icon-search" v-model="question" clearable
                    class="inputBox"></el-input>
          <el-button type="primary" @click="findQuestions">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="content">
      <el-tabs class="tabs" :tab-position="tabPosition" v-model="point" @tab-click="changeKlgPoints">
        <el-tab-pane
        v-for="(item, index) in klgPoints"
        :key="item.id"
        :label="item.name"
        :name="index"
        >
          <el-tabs class="inner-tab" v-model="type" @tab-click="changeType">
            <el-tab-pane
            v-for="(item, index) in types"
            :key="item.value"
            :label="item.name"
            :name="index"
            >
              <div class="cards">
                <div v-for="item in questions" v-bind:key="item.id" @click="goToDetail(item.id)">
                  <el-card class="box-card">
                    <div class="title">
                      <div>{{item.stem}}</div>
                      <div v-if="item.option.A">A. {{item.option.A}}</div>
                      <div v-if="item.option.A">B. {{item.option.B}}</div>
                      <div v-if="item.option.A">C. {{item.option.C}}</div>
                      <div v-if="item.option.A">D. {{item.option.D}}</div>
                    </div>
                    <div class="answer">{{item.answer}}</div>
                  </el-card>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getKnowledgePoints, getQuestionByKpointandType, findSubjectByID, findBankById, findQuestionsofBank, findQuestionFromBank, findSubjectByName } from '../../../api/question.js'

export default {
  name: 'index',
  data () {
    return {
      bank: {},
      // 跳转获取bankId
      bankId: this.$route.query.id,
      status: 0,
      subject: {},
      question: '',
      tabPosition: 'left',
      klgPoints: [],
      point: 0,
      questions: [],
      chooseBanks: [],
      chooseQuestions: [],
      type: 0,
      types: [
        {
          name: '单选',
          value: 'radio'
        },
        {
          name: '多选',
          value: 'multiple'
        },
        {
          name: '填空',
          value: 'filling'
        },
        {
          name: '简答',
          value: 'shortAnswer'
        }
      ]
    }
  },
  created () {
    this.findBankById(this.bankId)
    this.findBankBySubject()
  },
  methods: {
    findBankById (id) {
      findBankById(0, 20, id).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res.data)
          this.bank = res.data.data.list[0]
          var subjectName = res.data.data.list[0].subject
          findSubjectByName(subjectName).then(resp => {
            if (resp.data.errorCode === 0) {
              this.subject = resp.data.data
              getKnowledgePoints(this.subject.id).then(response => {
                if (response.data.errorCode === 0) {
                  this.klgPoints = response.data.data
                  console.log('klgpoints')
                  console.log(this.klgPoints)
                  console.log(this.point)
                  this.getQuestionByKpointandType()
                } else {
                  this.$message.error(response.data.message)
                }
              })
            } else {
              this.$message.error(resp.data.message)
            }
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getKnowledgePoints (id) {
      getKnowledgePoints(id).then(res => {
        this.klgPoints = res.data
      })
    },
    changeKlgPoints () {
      console.log('point')
      console.log(this.point)
      this.getQuestionByKpointandType()
    },
    changeType () {
      console.log('type')
      console.log(this.type)
      this.getQuestionByKpointandType()
    },
    getQuestionByKpointandType () {
      getQuestionByKpointandType(this.bankId, this.klgPoints[this.point].id, this.types[this.type].value).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res)
          var temp = res.data.data.list
          for (var item of temp) {
            var pstem = JSON.parse(item.questionStem)
            item.stem = pstem.stem
            item.option = pstem.options
          }
          this.questions = temp
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    goToDetail (id) {
      console.log(id)
      this.$router.push({path: '/student/questionDetail', query: {id: id}})
    },
    findSubjectByID (id) {
      findSubjectByID(id).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res.data)
          this.subject = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    findQuestionsofBank () {
      findQuestionsofBank(0, 20, this.question, this.bankId).then(res => {
        if (res.data.errorCode === 0) {
          this.questions = res.data.data.list
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    findQuestionFromBank () {
      findQuestionFromBank(this.chooseQuestion.bank).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res.data.data.list)
          var temp = res.data.data.list
          for (var item of temp) {
            var pstem = JSON.parse(item.questionStem)
            item.stem = pstem.stem
            item.option = pstem.options
          }
          console.log(temp)
          this.chooseQuestions = temp
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  /* eslint-disable */
  .content {
    padding: 15px;
    height: calc(100% - 60px);
    width: calc(100% - 30px);
    /* background-color: #42B983; */
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .breadcrumb {
    padding: 20px;
  }

  .subjectTitle {
    font-size: 25px;
    font-weight: bold;
    margin: 0 80px;
  }

  .searchBox {
    display: flex;
    margin: 10px 80px 10px 40px;
  }

  .inputBox {
    width: 200px;
    margin-right: 20px;
  }

  .tabs {
    width: 90%;
  }

  /deep/ .el-tabs__nav {
    z-index: 0;
  }

  /deep/ .el-tabs--left .el-tabs__item.is-left {
    font-size: 16px;
    height: 50px;
    line-height: 50px;
  }

  /deep/ .el-tabs--left .el-tabs__item:hover {
    color: #131878;
    font-weight: bold;
    box-shadow: 0px 12px 8px -12px rgba(98, 98, 98, 0.5);
  }

  /deep/ .el-tabs--left .el-tabs__item.is-left.is-active {
    font-weight: bold;
    border: 2px solid rgba(11, 11, 55, 0, 5);
    color: #131878;
    background-color: rgba(169, 215, 255, 0.4);
    border-radius: 10px 0 0 10px;
    box-shadow: 5px 12px 8px -10px rgba(98, 98, 98, 0.5);
  }

  /deep/ .el-tabs--left .el-tabs__active-bar {
    background-color: #123456;
  }

  .inner-tab {
    margin: 0 30px;
  }

  .inner-tab /deep/ .el-tabs__item {
    border-radius: 10px 10px 0 0;
    border: 2px solid rgba(255, 216, 99, 0.4);
    background-color: rgba(251, 255, 162, 0.4);
    width: 80px;
    font-size: 16px;
    /* font-weight: bold; */
    height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: bottom;
    padding: 0 20px !important;
  }

  /deep/ .inner-tab .el-tabs__item.is-active {
    height: 50px;
    color: rgb(191, 63, 0);
    font-weight: bold;
  }

  /deep/ .inner-tab .el-tabs__active-bar.is-top {
    z-index: 0 !important;
    background-color: none;
  }

  /deep/ .inner-tab .el-tabs__item:hover {
    color: rgb(191, 63, 0);
    font-weight: bold;
    /* height: 45px; */
  }

  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .box-card {
    width: 220px;
    margin: 10px 10px 30px;
    box-shadow: 0 0 8px rgba(98, 98, 98, 0.5);
  }

  .box-card:hover {
    /* width: 305px; */
    transform: scale(1.01);
    box-shadow: 0 0 10px rgba(117, 179, 255, 0.7);
  }

  .title {
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 18px;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: solid 1px rgba(91, 91, 91, 0.4);
  }

  .title:hover {
    cursor: pointer;
  }

  .answer {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #555555;
    display: block;
    text-align: left;
  }
</style>
